<template>
<section>
  <swiper :list="demo01_list" :auto="true" height="220px" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
  <grid v-for="(row,index) in grids" :key="index">
    <grid-item :link="{ path: grid.path + '/' + $route.params.id}" :label="grid.text" v-for="grid in row" :key="grid.text">
      <fontawesome-icon class="grid-icon" slot="icon" :icon="grid.icon" />
    </grid-item>
  </grid>
  <divider>马戏咖啡版权所有</divider>
</section>
</template>

<script>
import { Swiper, SwiperItem, Grid, GridItem, Divider } from "vux";
import FontawesomeIcon from "vue-fontawesomeicons";
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  components: {
    Swiper,
    SwiperItem,
    Grid,
    GridItem,
    Divider,
    FontawesomeIcon
  },
  data() {
    return {
      demo01_index: 0,
      demo01_list: [
        {
          url: "javascript:",
          img: "/wap/static/swiper/1.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/2.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/3.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/4.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/5.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/6.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/7.jpg"
        }
      ],
      grids: [
        [
          {
            text: "原产地信息",
            icon: "map",
            path: "/manor"
          },
          {
            text: "进出口信息",
            icon: "ship",
            path: "/transport"
          }
        ],
        [
          {
            text: "仓储信息",
            icon: "bank",
            path: "/storage"
          },
          {
            text: "产品信息",
            icon: "coffee",
            path: "/produce"
          }
        ],
        [
          {
            text: "品控信息",
            icon: "search-plus",
            path: "/quality"
          },
          {
            text: "生产商信息",
            icon: "folder",
            path: "/producer"
          }
        ]
      ]
    };
  },
  computed: {
    ...mapState({
      product: state => state.product
    })
  },
  methods: {
    ...mapMutations(["save", "remove"]),
    demo01_onIndexChange(index) {
      this.demo01_index = index;
    }
  },
  created() {
    this.$http
      .get("/product/detail?id=" + this.$route.params.id)
      .then(result => {
        this.save(result.data.data.product);
      });
  }
};
</script>

<style>
.weui-grid__label {
  color: #6c6c6c !important;
  font-size: 1.25rem !important;
  font-weight: 800;
}
.grid-icon {
  font-size: 3.125rem !important;
  color: #04be02;
}
.weui-grid > .weui-grid__icon {
  margin-bottom: 1.25rem !important;
  width: 3.125rem !important;
  height: 3.125rem !important;
}
.vux-demo {
  text-align: center;
}

.logo {
  width: 100px;
  height: 100px;
}

.ximg-demo {
  width: 100%;
  height: auto;
}

.ximg-error {
  background-color: yellow;
}

.ximg-error:after {
  content: "加载失败";
  color: red;
}
</style>
